<template>
  <div>
    <uploader
      ref="uploader"
      browse_button="browse_button"
      :url="server_config.url+'/File/file1'"
      :filters="{prevent_duplicates:true,mime_types:[{title:'pdf',extensions:'pdf'}]}"
      @inputUploader="inputUploader"
    />
    <el-tag type="warning">只允许上传发票的pdf文件</el-tag>
    <br/>
    <br/>
    <el-button type="warring" id="browse_button">批量选择</el-button>
    <br/>
    <el-table
      :data="tableData"
      style="width: 100%; margin: 10px 10px;min-width: 1100px">
      <el-table-column
        label="文件名">
        <template slot-scope="scope">
          <span>{{scope.row.filename}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status === 1">准备上传</span>
          <span v-if="scope.row.status === 4" style="color: brown">解析失败</span>
          <span v-if="scope.row.status === 5" style="color: darkgreen">解析成功</span>
          <span v-if="scope.row.status === 2" style="color: lightsteelblue">解析中...</span>

          <!--<el-progress v-if="scope.row.status === 2" :text-inside="true" :stroke-width="20" :percentage="scope.row.percent">解析中...</el-progress>
        -->
        </template>
      </el-table-column>
      <el-table-column
        label="发票代码">
        <template slot-scope="scope">
          <span>{{scope.row.code}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="发票号码">
        <template slot-scope="scope">
          <span>{{scope.row.num}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="开票日期">
        <template slot-scope="scope">
          <span>{{scope.row.time}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="校验码后6位">
        <template slot-scope="scope">
          <span>{{scope.row.check}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="开票方名称">
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="金额">
        <template slot-scope="scope">
          <span>{{scope.row.price}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="税额">
        <template slot-scope="scope">
          <span>{{scope.row.tax}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="合计">
        <template slot-scope="scope">
          <span>{{scope.row.sum}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button type="danger" @click="deleteFile(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br/>
    <el-row>
      <el-col :span="12">
        <el-button type="primary" @click="up.start()">批量上传</el-button>
      </el-col>
      <el-col :span="12">
        <el-button style="float: right" type="success" @click="getXlsUrl(server_config.url+'/File/download/')">下载xls</el-button>
      </el-col>
    </el-row>
    <br/><br/>


    <div align="center">
      <div align="center" style="color: #6f7180;font-weight:900;font-size: 20px;">发票样例</div>
      <img :src="picUrl" width="600px"/>
    </div>
  </div>
</template>

<script>
  import Uploader from './Uploader'
  import axios from 'axios'
  export default {
    name: "VATInvoice",
    data() {
      return {
        picUrl:'/static/sample1.png',
        files: [],
        showbar:false,
        up: {},
        server_config: this.global.server_config,
        tableData: [],
        filterUrl:'#'
      }
    },
    watch: {
      files: {
        handler() {
          this.tableData = [];
          this.files.forEach((e) => {
            this.tableData.push({
              filename: e.name,
              status: e.status,
              id: e.id,
              percent: e.percent,
              code:  e.data?e.data.code:'',
              num: e.data?e.data.num:'',
              name: e.data?e.data.name:'',
              price: e.data?e.data.price:'',
              tax: e.data?e.data.tax:'',
              sum: e.data?e.data.sum:'',
              check: e.data?e.data.check:'',
              time: e.data?e.data.time:''
            });
          });
        },
        deep: true
      }
    },
    methods: {

      inputUploader(up) {
        this.up = up;
        this.files = up.files;
      },
      deleteFile(id) {
        let file = this.up.getFile(id);
        this.up.removeFile(file);
      },
      getXlsUrl(api){
          var datas = [];
          for(var i=0;i<this.tableData.length;i++){
              if(this.tableData[i].status==5){
                  var data = {
                      code:  this.tableData[i].code,
                      num: this.tableData[i].num,
                      name: this.tableData[i].name,
                      price: this.tableData[i].price,
                      tax: this.tableData[i].tax,
                      sum: this.tableData[i].sum,
                      check: this.tableData[i].check,
                      time: this.tableData[i].time,
                      filename:this.tableData[i].filename
                  };
                  datas.push(data);
              }
          }
        if(datas.length>0) {
          axios.post(api, datas).then((response) => {
            var filterUrl = response.data.data;
            const a = document.createElement('a');
            a.href = filterUrl;
            a.click();
            console.log(response)
          })
        }else{
          alert('内容为空！');
        }
      }
    },
    components: {
      'uploader': Uploader
    }
  }
</script>

<style scoped>
</style>
